﻿<%@ page import="java.lang.*" isELIgnored="false" language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
<% 
String ContextPathName=
request.getScheme()+"://"+request.getServerName()+":"+
request.getLocalPort()+request.getContextPath()+"/";
%>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="<%=ContextPathName%>css/diaLog.css"/>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
				text-decoration: none;
			}
			.center{
				margin:0px auto;
				width:350px;
				height: auto;
			}
			.chatting_window{
				width: 350px;
				height: auto;
				min-height: 200px;
				max-height: 500px;
				overflow-y: scroll;
				background: rgb(61,68,78);
				margin-bottom:30px;
			}
			.text_btn_wrap{
				width:350px;
				height:30px;
			}
			.chatting_send_btn{
				display:inline-block;
				font:12px '微软雅黑';
				color:#444;
				width:80px;
				height:30px;
				background-color:#f70;
				text-align:center;
				line-height: 28px;
				box-shadow:0xp 0px 1px #999;
				border:1px solid #999;
				border-radius:3px; 
			}
			.chatting_send_btn:hover{
				background-color:#f77;
			}
			.chatting_text{
				width:160px;
				height:30px;
				margin-right:20px;
			}
		
		</style>
		<script type="text/javascript">
			var contextPathName = "<%=ContextPathName%>";
		</script>
		<script type="text/javascript" src="<%=ContextPathName%>jquery/jquery.min.js"></script>
		<script type="text/javascript" src="<%=ContextPathName%>jquery/diaLog.js"></script>
		<script type="text/javascript">
			var next_dialog_id = 0;
			function initDiaLogText(name,value){
				var ul = $('<ul></ul>');
				ul.append('<li class="name">'+name+' 说:</li>').
				append('<li class="content">'+value+'</li>');
				return ul;
			}
			/*
				userId , img_url , color , username , message 
			*/
			function doPushDialog(data){
				var userId=$(":hidden[name='userId']").val();
				var flag  = false;
				var color = 'rgb(215,228,166)';
				if(data['userId']==userId){
					flag = true;
					color = 'rgb(222,222,222)';
				}
				//'rgb(215,228,166)' 'rgb(222,222,222)'
				var dialog = new DiaLog({
					class_Name:'dialog'+next_dialog_id,
					img_url:data.img_url,
					direct:flag,
					color:color
				});
				next_dialog_id +=1;
				var str = initDiaLogText(data.username,data.message);
				dialog.send($(".chatting_window"),str);
				$(".chatting_window").scrollTop($(".chatting_window")[0].scrollHeight);
			}
		</script>
		<script type="text/javascript">
		$(function(){
			var roomId= $(":hidden[name='roomId']").val();
			$(".chatting_send_btn").click(function(){
				var value = $(".chatting_text").val();
				var roomId= $(":hidden[name='roomId']").val();
				value=value;
				console.log("click次数");
				$.ajax({
					beforeSend:function(){
						if(value==''&&value==null)
							return false;
					},
					url:contextPathName+'user/webqqRoom.servlet',
					type:'post',
					data:'message='+value+"&roomId="+roomId,
					success:function(){	
						console.log("success次数");
					},
					timeout:100000,
					error:function(XMLHttpRequest,textStatus,errorThrown){
						if(textStatus=='timeout')
							alert("网络连接出错");
					}
				})
			})
			$(window).keydown(function(event){
				if(event.keyCode==13){
					$(".chatting_send_btn").click();
				}
			});
			function LongPoll(){
				$.ajax({
					url:contextPathName+'user/webqq.servlet',
					type:'post',
					data:"roomId="+roomId,
					timeout:10000,
					success:function(data){
						var data = eval('('+data+')');
						console.log(data);
						doPushDialog(data);
						LongPoll();
					},
					error:function(xmlrequest,textStatus){
						if(textStatus=='timeout')
							LongPoll();
					}
				})
			}
			LongPoll();			
		})
	</script>
		<title>聊天室</title>

	</head>
	<body>
		<div class="center">
			<div class="chatting_window"></div>
			<div class="text_btn_wrap">
				<input type="hidden" name="roomId" value="${roomId}"/>
				<input type="hidden" name="userId" value="${userId}"/>
				<input class="chatting_text" type="text" placeholder="请输入对话内容"/>
				<a class="chatting_send_btn" href="javascript:void();">发送</a>
			</div>
		</div>
	</body>
</html>